import React, { Component } from 'react';
import Bar from "./Bar";
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            r: 0,
            g: 0,
            b: 0
        };
        this.setColor = (this.setColor).bind(this);
    }

    setColor(color, val) {
        this.setState({ [color]: val });
        console.log(`${color}, ${val}`);
    }

    render() {
        return (
            <div className="App">
                <div className="box" style={{ "backgroundColor": `rgba(${this.state.r}, ${this.state.g}, ${this.state.b})` }}></div>
                <Bar color="r" v={this.state.r} setColor={this.setColor} />
                <Bar color="g" v={this.state.g} setColor={this.setColor} />
                <Bar color="b" v={this.state.b} setColor={this.setColor} />
            </div>
        );
    }
}

export default App;
